<!--
 * @Author: yanjikun
 * @Date: 2022-05-13 09:54:54
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-06-16 11:28:06
 * @Description: file content
-->
<template>
  <div class="login">
    <BasicForm
      :config="config"
      @register="register"
      :initialValues="{ admin: '123', tinymce: '<p>tdesign</p>' }"
      :show-reset-button="true"
      @submit="handleSubmit1"
      label-width="100px"
      :action-col-options="{ offset: 20 }"
    ></BasicForm>
    <Button type="primary" @click="handleClick">测试</Button>
    <BasicHelp :text="['测试', '123', '456']">
      <IconFont type="yangan" prefix="custom-icon-" size="30" color="#ff0000"></IconFont>
    </BasicHelp>
    <DynamicTable :columns="columns" :data-source="tableData"> </DynamicTable>
    <BasicChart
      :data-request="chartRequest"
      style="height: 300px"
      @register="registerChart"
    ></BasicChart>
    <ModalRender></ModalRender>
    <DescriptionsRender :label-style="{ width: '100px' }">
      <template #age="{ value }">
        <div>{{ value }}岁</div>
      </template>
    </DescriptionsRender>
    <BasicTree :treeData="treeData"></BasicTree>
  </div>
</template>

<script setup lang="tsx">
  import BasicForm from '@/components/Form/src/BasicForm.vue'
  import { Button, TreeSelect } from 'ant-design-vue'
  import { useForm } from '@/components/Form/src/hooks/useForm'
  import { FormConfig } from '@/components/Form/src/types/form'
  import { TableColumn } from '@/components/Table/src/types/column'
  import BasicChart from '@/components/Chart/src/BasicChart.vue'
  import * as echarts from 'echarts'
  import { useChart } from '@/components/Chart/src/hooks/useChart'
  import { useTable } from '@/components/Table/src/hooks/useTable'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import IconFont from '@/components/IconFont'
  import BasicHelp from '@/components/BasicHelp'
  import { useDescriptions } from '@/components/Descriptions/src/hooks/useDescriptions'
  import { DescriptionsConfig } from '@/components/Descriptions/src/types/descriptions'
  import { menuList } from '@/api/system/menu'
  import BasicTree from '@/components/Tree/src/BasicTree.vue'
  const config: FormConfig[] = [
    {
      label: '基础信息',
      component: 'Divider',
      field: 'divider',
      helpMessage: '测试1234213123',
      // colProps: {
      //   span: 24
      // }
    },
    {
      label: 'qwe',
      component: 'Input',
      field: 'admin',
      message: '请填写admin',
      colProps: {
        span: 6,
      },
      required: true,
      componentProps: {
        placeholder: '请填写admin',
      },
      componentSlots: {
        prefix: () => <IconFont type="yangan" prefix="custom-icon-" color="red" />,
      },
    },
    {
      label: '远程下拉',
      component: 'ApiTreeSelect',
      field: 'select',
      message: '请选择远程下拉',
      colProps: {
        span: 6,
      },
      required: true,
      componentProps: {
        placeholder: '请选择远程下拉',
        api: () => {
          return menuList()
        },
        fieldNames: { children: 'children', label: 'name', key: 'id', value: 'id' },
        multiple: true,
        treeCheckable: true,
        showCheckedStrategy: TreeSelect.SHOW_ALL,
        maxTagCount: 2,
      },
      dynamicDisabled: ({ values }) => {
        return values.admin === '12'
      },
    },
    {
      label: '图标',
      component: 'IconsSelect',
      field: 'icon',
      message: '请选择图标',
      colProps: {
        span: 6,
      },
      defaultValue: 'chongzhijilu',
      required: true,
      componentProps: {},
    },
    {
      label: '地址',
      component: 'AddressSelect',
      field: 'address',
      message: '请选择地址',
      colProps: {
        span: 6,
      },
      required: true,
      componentProps: {
        placeholder: '请选择地址',
      },
    },
  ]
  const [register, { handleSubmit }] = useForm()
  const [DynamicTable, dynamicTableInstance] = useTable()
  const [showModal, ModalRender] = useFormModal()
  const handleClick = async () => {
    const data = await handleSubmit()
    console.log(data)
    dynamicTableInstance?.reload()
    showModal({
      modalProps: {
        title: '测试',
        width: '50%',
        onFinish: (values) => {
          console.log(values)
          return Promise.resolve()
        },
      },
      formProps: {
        config: config,
        labelWidth: '100px',
      },
    })
  }
  const handleSubmit1 = (data: any) => {
    console.log(data)
  }

  type tableItem = {
    test: string
    num: number
    age: number
  }
  const tableData: tableItem[] = [
    {
      test: '123',
      num: 10,
      age: 100,
    },
  ]
  const columns: TableColumn<tableItem>[] = [
    {
      title: '测试',
      dataIndex: 'test',
    },
    {
      title: '数量',
      dataIndex: 'num',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      bodyCell: ({ record }) => <>{[record.age]}岁</>,
    },
    {
      title: '操作',
      dataIndex: '$action',
      actions: ({ record }) => {
        return [
          {
            label: '删除',
            modalConfirm: {
              title: '确定删除该条数据吗?',
              onOk: () => {
                console.log(record)
              },
            },
          },
          {
            label: '删除1',
            modalConfirm: {
              title: '确定删除该条数据吗?',
              onOk: () => {
                console.log(record)
              },
            },
          },
        ]
      },
    },
  ]
  const chartRequest = (): Promise<echarts.EChartsOption> => {
    return new Promise((resolve) =>
      resolve({
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: 'Gradient Stacked Area Chart',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)',
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            name: 'Line 3',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)',
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [320, 132, 201, 334, 190, 130, 220],
          },
          {
            name: 'Line 4',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)',
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: 'Line 5',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: 'top',
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)',
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      }),
    )
  }
  const [registerChart] = useChart()
  const descConfig: DescriptionsConfig<tableItem>[] = [
    {
      field: 'test',
      label: '测试',
      span: 1,
      labelStyle: {
        width: '100px',
      },
    },
    {
      field: 'num',
      label: '数量',
      bodyCell: ({ value }) => {
        return <>{`${value}个`}</>
      },
      span: 2,
    },
    {
      field: 'age',
      label: '年龄',
      slot: 'age',
      span: 3,
    },
    {
      field: 'age',
      label: '年龄',
      slot: 'age',
      span: 1,
    },
    {
      field: 'age',
      label: '年龄',
      slot: 'age',
      span: 1,
    },
    {
      field: 'age',
      label: '年龄',
      span: 1,
      bodyCell: ({ value }) => {
        return <>{`${value}岁岁`}</>
      },
    },
  ]
  const fields: tableItem = {
    test: '测试项',
    num: 10,
    age: 100,
  }
  const [DescriptionsRender] = useDescriptions({ config: descConfig, fields, bordered: true })
  const treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          name: '123',
          children: [
            { title: '0-0-0-0', key: '0-0-0-0' },
            { title: '0-0-0-1', key: '0-0-0-1' },
            { title: '0-0-0-2', key: '0-0-0-2' },
          ],
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            { title: '0-0-1-0', key: '0-0-1-0' },
            { title: '0-0-1-1', key: '0-0-1-1' },
            { title: '0-0-1-2', key: '0-0-1-2' },
          ],
        },
      ],
    },
  ]
</script>

<style scoped lang="less">
  .login {
    width: 100%;
  }
</style>
